<template>
  <view class="share-container">
    <!-- 主图区域 -->
    <view class="main-image">
      <image
        class="share-image"
        src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250510/2ab99255ab24de8d816966d1100112ea.png"
        mode="widthFix"
      ></image>
    </view>

    <!-- 固定底部按钮区域 -->
    <view class="fixed-bottom">
      <view class="share-buttons">
        <view class="share-btn link-btn">
          <!-- <image
            class="btn-icon"
            src="@/pagesSocial/static/img/album.png"
            mode="aspectFit"
          ></image> -->
          <text>分享链接</text>
        </view>
        <view class="share-btn poster-btn">
          <!-- <image
            class="btn-icon"
            src="@/pagesSocial/static/img/album.png"
            mode="aspectFit"
          ></image> -->
          <text>分享海报</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.share-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .main-image {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    .share-image {
      width: 100%;
      height: 100%;
    }
  }

  .fixed-bottom {
    // position: fixed;
    // bottom: 0;
    // left: 0;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

    .share-buttons {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
      padding: 0 30rpx;

      .share-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 44rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        text-align: center;
        border: 1rpx solid rgba(187, 187, 187, 1);

        .btn-icon {
          width: 48rpx;
          height: 48rpx;
          margin-bottom: 8rpx;
        }

        text {
          font-size: 32rpx;
          color: #333;
          padding: 16rpx 50rpx;
        }
      }
    }
  }
}
</style>
